<template>
  <view class="container">
    <view class="questionaire-list">
      <view
        class="card"
        v-for="(item, index) in filteredQuestionaireList"
        :key="item.id"
        @click="goToDetail(item.id)"
      >
        <view class="card-content">
          <!-- 彩色图标 -->
          <u-icon
            :name="icons[index % icons.length]"
            size="48"
            :color="colors[index % colors.length]"
            class="card-icon"
          ></u-icon>

          <!-- 问卷名称 -->
          <view class="card-text">
            <view class="card-title">{{ item.name }}</view>
            <view class="card-desc">{{ item.description || '点击查看记录' }}</view>
          </view>

          <!-- 右箭头 -->
          <u-icon name="arrow-right" color="#ccc" size="28" class="arrow-icon"></u-icon>
        </view>
      </view>
	  
	  <!-- 卒中复发风险测算 -->
	  <view class="card" @click="goToRiskDetail()">
	    <view class="card-content">
	      <!-- 彩色图标 -->
	      <u-icon
	        :name="icons[1]"
	        size="48"
	        :color="colors[3]"
	        class="card-icon"
	      ></u-icon>
	  
	      <!-- 问卷名称 -->
	      <view class="card-text">
	        <view class="card-title">卒中复发风险测算</view>
	        <view class="card-desc">{{ '点击查看记录' }}</view>
	      </view>
	  
	      <!-- 右箭头 -->
	      <u-icon name="arrow-right" color="#ccc" size="28" class="arrow-icon"></u-icon>
	    </view>
	  </view>
	  
    </view>
  </view>
</template>

<script>
import { getQuestionaireList } from '@/common/api';

export default {
  data() {
    return {
      questionaireList: [],
      icons: ['heart', 'calendar', 'file-text', 'smile', 'activity'], // uView 图标名
      colors: ['#FF7F50', '#6495ED', '#32CD32', '#FF69B4', '#FFA500'] // 图标颜色
    };
  },
  onLoad() {
    this.loadList();
  },
  computed: {
    filteredQuestionaireList() {
      return this.questionaireList.filter(item => item.name == 'Essen卒中风险评估');
    }
  },
  methods: {
    async loadList() {
      try {
        const qlRes = await getQuestionaireList();
        this.questionaireList = qlRes.rows;
        console.log(qlRes.rows);
      } catch (e) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      }
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/assessment/assessment-reports?id=${id}`
      });
    },
	goToRiskDetail() {
	  uni.navigateTo({
	    url: '/pages/assessment/qr-reports'
	  });
	}
  }
};
</script>

<style scoped>
.container {
  padding: 40rpx 30rpx;
  background-color: #f2f4f7;
  min-height: 100vh;
}

.header {
  font-size: 40rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
  text-align: center;
}

.questionaire-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.card {
  background: linear-gradient(135deg, #ffffff, #f9fbfc);
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.05);
  border-radius: 20rpx;
  padding: 28rpx;
  transition: transform 0.2s;
}

.card:active {
  transform: scale(0.98);
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  margin-right: 24rpx;
}

.card-text {
  flex: 1;
}

.card-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #222;
  margin-bottom: 8rpx;
}

.card-desc {
  font-size: 26rpx;
  color: #888;
}

.arrow-icon {
  margin-left: 16rpx;
}
</style>
